<template>
    <div class="musicSwipe">
        <div class="musicTop">
            <h3>发现好歌单</h3>
            <div class="more">查看更多</div>
        </div>
            <van-swipe :loop="false" :width="130" >
        <van-swipe-item v-for="item in state.musicList" :key="item.id">
        <router-link :to="{path:'/itemmusic',query:{id:item.id}}">
        <img :src="item.coverImgUrl">
        <div class="playCount">
            <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-24gl-play"></use>
        </svg>
        <span>{{changeCount(item.playCount)}}</span>
        </div>
        <span class="musicName">{{item.name}}</span>
        </router-link>
        </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import {getMusic} from '@/request/api';
import { onMounted ,reactive} from 'vue';
    export default {
        setup(){
            const state=reactive({
            musicList:[]})
            onMounted(async()=>{
              let res=await getMusic();
              console.log('获取推荐歌单');
              console.log(res);
              state.musicList=res.data.playlists;
              console.log(state.musicList);
            })
            const changeCount=(num)=>{
                if(num>=100000000){
                    return (num/100000000).toFixed(1)+"亿"
                }else if(num>=10000){
                    return (num/10000).toFixed(1)+"万"
                }else{
                    return num
                }
            }
    return {state ,changeCount};
    }
    }
</script>

<style lang="less" scoped>
.musicSwipe{
    width: 100%;
    .musicTop{
        margin-top: 20px;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
    }
    .more{
        border: 1px solid #d8d8d8;
        font-size: 12px;
        padding:  5px 7px;
        border-radius: 20px;
    }
    .van-swipe{
        margin: 0 5px;
        .van-swipe-item{
            position: relative;
            padding: 10px 5px;
            img{
                width: 120px;
                height: 120px;
                border-radius: 10px;
            }
            .playCount{
                position: absolute;
                display: flex;
                flex-direction: row;
                align-items: center;
                top: 10px;
                right: 10px;
                .icon{
                    width: 20px;
                    height: 20px;
                    color: #fff;
                    margin-right: 5px;
                }
                span{
                    font-size: 12px;
                    color: #fff;
                }
            }
            .musicName{
                font-size: 14px;
            }
        }
    }
}
</style>